<template>
    <!-- 医生新增收费 -->
    <section>
        <div>
            <div class="form-group" @click="showCosttype=true">
                <formCell v-model="formData.costtype" title="收费类型" :placeholder="formData.costtype" icon="true"/>
            </div>
            <nut-picker
                    :title="formData.costtype"
                    :is-visible="showCosttype"
                    :list-data="[costtype]"
                    @close="closeCosttype"
                    @confirm="chooseCosttype"
            >
            </nut-picker>

            <!--<div class="form-group">
                <formCell v-model="formData.number" title="数量" placeholder="1" tag="number"/>
            </div>-->
            <div class="form-group">
                <formCell v-model="formData.price" title="价格" :readonly="formData.costtype === '诊金'"
                          placeholder="请输入" tag="number" suffix="分"/>
            </div>
            <div class="form-group" @click="showDiscount=true">
                <formCell v-model="formData.discount" title="折扣价" :placeholder="formData.discount" icon="true"/>
            </div>

            <nut-picker
                    :title="formData.discount"
                    :is-visible="showDiscount"
                    :list-data="[discount]"
                    @close="closeDiscount"
                    @confirm="chooseDiscount"
            >
            </nut-picker>
            <div class="form-group cost">
                <formCell title="费用说明" align="top">
                    <textarea v-model="formData.message" class="item-textarea" placeholder="说明该费用原因"></textarea>
                </formCell>
            </div>
            <div class="cutline"></div>
            <div class="btn-group">
                <button class="btn btn-main" @click="onSubmit()">确定</button>
            </div>
        </div>
    </section>
</template>

<script>
    /* eslint-disable no-console */

    import formCell from "@/components/common/formCell.vue";

    const components = {formCell};
    export default {
        components,
        data() {
            return {
                // costtype: ["运费", "诊金", "其他费用"],
                costtype: ["诊金", "其他费用"],
                showCosttype: false,
                discount: ["免費", "五折", "原价"],
                showDiscount: false,
                formData: {
                    discount: "请选择",
                    price: 0.00,
                    discountPrice: 0.00,
                    costtype: "请选择",
                    message: ""
                },
                price: 0,
                index: -1
            }
        },
        watch() {

        },
        created() {
            if (!this.$route.params) {
                return;
            }
            let item = this.$route.params.item;
            if (item) {
                this.index = this.$route.params.index;
                this.formData.discount = item.discount;
                this.formData.price = item.price;
                this.formData.discountPrice = item.discountPrice;
                this.formData.costtype = item.name;
                this.formData.message = item.message;
                this.price = this.formData.price;
            }
        },
        methods: {
            onSubmit() {
                let item = {
                    discount: this.formData.discount,
                    name: this.formData.costtype,
                    message: this.formData.message,
                    price: this.formData.price,
                    discountPrice: this.formData.discountPrice,
                };
                let dataList = this.$store.state.freeInfoList;

                if (this.index !== -1) {
                    dataList.del(this.index);
                }
                dataList.push(item);

                this.$store.state.freeInfoList = dataList;

                this.$router.back();
                // this.API.POST("/drs/preOrderByDr",{
                //   ...this.$route.params,
                //   ...fd
                // }).then(({data})=>{
                //   if(+data.code===1200){
                //     let data = localStorage.getItem("costdata")?JSON.parse(localStorage.getItem("costdata")):[];
                //     data.push(fd);
                //     localStorage.setItem("costdata",data);
                //     this.$router.back();
                //   }else{
                //     this.$toast.text(data.msg||"提交失败")
                //   }
                // })
            },
            closeCosttype() {
                this.showCosttype = false;
            },
            chooseCosttype(data) {
                console.log("---", this.formData)
                console.log("---chooseCosttype----", data)
                this.formData.costtype = data[0];
            },
            closeDiscount() {
                this.showDiscount = false;
            },
            chooseDiscount(data) {
                console.log(data);
                this.formData.discount = data[0];

                if (this.formData.discount == "免費"){
                    this.formData.discountPrice = 0;
                } else if(this.formData.discount == "五折"){
                    this.formData.discountPrice = this.formData.price / 2;
                }else{
                    this.formData.discountPrice = this.formData.price;
                }
                console.log(this);
            }
        }
    }
</script>


<style lang="css" scoped>
    .cutline {
        height: 20px;
    }

    .btn-group {
        padding: 6px 12px;
    }

    .btn-group .btn {
        border: none;
        background-color: transparent;
        display: block;
        height: 45px;
        width: 100%;
        border-radius: 2px;
        font-size: 14px;
    }

    .btn-group .btn.btn-main {
        background-color: #2D90DE;
        color: #fff;
    }

    .btn-group .btn.btn-gray {
        background-color: #DADADA;
        color: #7E8A96;
        border: solid 1px #7E8A96;
    }

    .form-group {
        background-color: #fff;
        padding: 0px 10px;
    }

    .form-group .form-item {
        font-size: 14px;
        padding: 14px 0;
        border-bottom: 1px solid #e8e8e8;
    }

    .form-group .item-textarea {
        height: 50px;
    }

    .form-group.cost {
        margin-top: 20px;
    }

</style>
